<template>
  <div class="stock_locking">
    <div class="header">
      <div class="header_left">
        <span>所有商品</span>
      </div>
      <div class="header_right">
        <el-button type="primary" @click="handelUpdateLock">保存修改</el-button>
        <el-button type="" @click="handelClickBak">返回</el-button>
      </div>
    </div>
    <div class="content">
      <div class="content_left">
        <div class="content_left_header">关联信息</div>
        <div class="content_left_content">
          <ul>
            <li>
              <span>姓名:</span>
              <p>{{ details.customerName }}</p>
            </li>
            <li>
              <span>电话:</span>
              <p>{{ details.customerMobileCode }}</p>
            </li>
            <li>
              <span>项目地址:</span>
              <p>{{ details.customerAddress }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="content_right">
        <div class="list" v-for="(item, index) in details.orderDetailLockList" :key="index">
          <div class="top">
            <div class="top_left">
              <div class="top_left_img">
                <img :src="item.mainPicUrl" alt="" />
                <div class="custom-fixed-icon" v-if="item.isCustom === 1">
                  <img src="@/assets/images/custom-icon.png" alt="" width="48" height="43" @click="toProdDetail(item)" />
                </div>
              </div>
              <div class="top_left_text">
                <h4
                  :class="{ 'jzt-cursor-point': item.isCustom === 1 }"
                  @click="item.isCustom === 1 ? toProdDetail(item) : () => {}"
                >
                  {{ item.productAliasName }}
                </h4>
                <p>
                  {{ item.skuSpecification }}
                  <!-- <span v-for="(citem, cindex) in JSON.parse(item.properties)" :key="cindex">{{ citem.specificationVal }}</span> -->
                </p>
                <p>SKU编码：{{ item.skuCode }}</p>
                <p>ID:{{ item.productId }}</p>
              </div>
            </div>
            <div class="top_right">
              <div>
                <p class="mr44">
                  <span>已出库数量：</span><span>{{ item.totalDeliveryNum }} | {{ item.totalDeliveryPartNum }}（件）</span>
                </p>
                <p>
                  <span>商品数量：</span><span>{{ item.commodityNum }} | {{ item.detailNum }}（件）</span>
                </p>
                <p>
                  <span>锁定数量：</span><span>{{ item.totalLockNum }} | {{ item.totalLockPartNum }}（件）</span>
                </p>
              </div>
            </div>
          </div>
          <div class="center" v-for="(ck_item, ck_index) in item.lockWarehouseInfoList" :key="ck_index">
            <template v-if="ck_item.usableNum == 0 ? false : true">
              <div class="center_left">
                <div>
                  <p>{{ ck_item.warehouseName }}：{{ ck_item.lockableNum }}丨{{ ck_item.lockablePartNum }}(件)：</p>
                </div>
                <div>
                  已锁定数量：
                  <InputNumber
                    :width="'60px'"
                    :min="'0'"
                    v-model:value="ck_item.lockNum"
                    :disabled="ck_item.isDisabled || item.isCustom === 1"
                    :isCustom="item.isCustom === 1"
                    @updateValue="
                      oldValue => {
                        handleUpdateValue(item, ck_item, oldValue);
                      }
                    "
                  ></InputNumber>
                  <!-- <el-input-number v-model="ck_item.lockNum" :min="1" :max="10000" @change="handleUpdateValue(item, ck_item)" /> -->
                </div>
              </div>
              <div class="center_right">
                <div>
                  已锁定件数：<InputNumber
                    :width="'60px'"
                    :max="ck_item.maxjs"
                    :min="'0'"
                    :deeps="ck_item.deepsNum"
                    :disabled="ck_item.isDisabledjs || item.isCustom === 1"
                    :isCustom="item.isCustom === 1"
                    v-model:value="ck_item.lockPartNum"
                    @updateValue="handleUpdateValueLockedNum(item, ck_item.lockPartNum, ck_item)"
                  ></InputNumber>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
// API
import { getLockList, updateLock } from "@/apis/order/index";
// 导入路由方法
import { useRoute, useRouter } from "vue-router";
// 组件导入
import InputNumber from "@/components/InputNumber";
// 声明变量
const route = useRoute();
const router = useRouter();
const details = ref({}); //获取的详情数据
// 声明方法-----------start

const toProdDetail = row => {
  const baseRouter = window.microApp.router.getBaseAppRouter();
  const routeUrl = baseRouter.resolve({
    path: "/designer/shopDetail/index",
    query: { id: row?.productId }
  });
  window.open(routeUrl.href, "_blank");
};

const handelClickBak = () => {
  router.go(-1);
};
const getLockLists = () => {
  // 获取锁定列表
  getLockList(route.query.orderId, route.query.factorId)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        res.data.orderDetailLockList.map(it => {
          const res2 = it.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
            return accumulator + Number(currentObject.lockNum);
          }, 0);
          it.lockWarehouseInfoList.map(cit => {
            cit.max = cit.lockableNum;
            cit.maxjs = cit.lockablePartNum;
            cit.isDisabled = cit.lockNum >= it.commodityNum ? true : res2 >= it.commodityNum ? true : false;
            cit.isDisabledjs = cit.lockNum == 0 ? true : false;
            cit.deepsNum = 0;
          });
        });
        details.value = res.data;
      }
    })
    .catch(err => {
      console.log(err);
    });
};

// 锁定件数
const handleUpdateValueLockedNum = (item, lockPartNum, ckitem) => {
  console.log(item, lockPartNum, ckitem);
  const detailNum = item.detailNum; //需要采购的总数件数
  const lockPartNums = lockPartNum; //当前锁定的数量件数
  const usablePartNums = ckitem.usablePartNum; //仓库的总商品数包括锁定未锁定
  // 所有的输入件数之和
  const res1 = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
    return accumulator + Number(currentObject.lockPartNum);
  }, 0);
  // 判断当前输入的是否大于了需要采购的件数量，如果大于当前输入的数组至0，重新计算，不在执行return后的代码
  if (res1 > detailNum) {
    ckitem.lockPartNum = 0;
    const res2 = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
      return accumulator + Number(currentObject.lockPartNum);
    }, 0);
    item.totalLockPartNum = res2;
    // return;
  }
  if (ckitem.lockPartNum > ckitem.usablePartNum) {
    ckitem.lockPartNum = 0;
  }
  // 如果锁定数量大于等于就禁用add反之取消禁用
  if (res1 >= detailNum) {
    // ckitem.lockPartNum = 0;
    details.value.orderDetailLockList.map(it => {
      it.lockWarehouseInfoList.map(cit => {
        if (item.orderDetailId == it.orderDetailId) {
          cit.isDisabledjs = true;
        }
      });
    });
  } else {
    details.value.orderDetailLockList.map(it => {
      it.lockWarehouseInfoList.map(cit => {
        if (item.orderDetailId == it.orderDetailId) {
          cit.isDisabledjs = false;
        }
      });
    });
  }
  if (res1 <= detailNum) {
    console.log("满足....1");
    // if(lockPartNums<=ckitem.lockablePartNum && lockPartNums<=totalLockPartNum){
    console.log("满足....2");
    ckitem.lockablePartNum = usablePartNums - lockPartNums;
    // }
    const res = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
      return accumulator + Number(currentObject.lockPartNum);
    }, 0);
    item.totalLockPartNum = res;
  } else {
    console.log("不满足");
  }
  // 判断当前项是否仓库件数是否为 0
  item.lockWarehouseInfoList.map(it => {
    if (it.lockablePartNum == 0) {
      it.isDisabledjs = true;
    }
    if (it.lockNum == 0) {
      it.isDisabledjs = true;
    }
  });
};
// 锁定数量
const handleUpdateValue = (item, ckitem, oldValue) => {
  // const usablePartNums = ckitem.usablePartNum; //仓库的总商品数包括锁定未锁定
  // const lockPartNums = ckitem.lockPartNum; //当前锁定的数量件数
  // ckitem.lockablePartNum = usablePartNums - lockPartNums;
  // alert(1)

  // const lockNum = ckitem.lockNum; //当前项锁定的数量
  const lockNum = oldValue; //当前项锁定的数量
  const commodityNum = item.commodityNum; //需要的商品数量
  const usableNum = Number(ckitem.usableNum); //当前项未锁定的数量
  // 当前全部锁定的数量
  const total = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
    return accumulator + Number(currentObject.lockNum);
  }, 0);
  // 当减的时候
  if (total < commodityNum) {
    console.log("在减少", "原来的数据", oldValue);

    ckitem.lockableNum = usableNum - lockNum;
    item.lockWarehouseInfoList.map(it => {
      if (it.lockableNum <= 0) {
        it.isDisabled = true;
      } else {
        it.isDisabled = false;
      }
    });

    item.totalLockNum = total;

    // console.log("AAAAAAAAA", ckitem.awaitDeliveryNum, ckitem.lockNum);
    if (ckitem.awaitDeliveryNum > 0 && ckitem.lockNum < ckitem.awaitDeliveryNum) {
      ElMessage({
        message: "当前锁定库存已发起出库，锁定库存数量不能减少！",
        type: "error"
      });

      nextTick(() => {
        ckitem.lockNum = oldValue;
        // console.log("oldValue", oldValue);
      });
    }
  } else if (total == commodityNum) {
    console.log(111);
    // alert(2);
    // 当数量和大于需要订购的数则全部禁用
    item.lockWarehouseInfoList.map(it => {
      it.isDisabled = true;
    });
    item.totalLockNum = total;
    ckitem.lockableNum = usableNum - lockNum;
  }
  if (total > commodityNum) {
    console.log(222);
    // alert(3);
    // 当数量和大于需要订购的数则当前项lockNum为0
    // console.log(total, "total");
    ckitem.lockNum = 0;
    ckitem.deepsNum = ckitem.deepsNum + 1;
    const total1 = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
      return accumulator + Number(currentObject.lockNum);
    }, 0);
    // item.lockWarehouseInfoList.map(it => {
    //   it.isDisabled = false;
    // });
    // alert(total1);
    if (total1 > commodityNum) {
      ckitem.lockNum = 0;
    } else {
      item.lockWarehouseInfoList.map(it => {
        it.isDisabled = false;
      });
    }
    ckitem.lockableNum = usableNum;
    item.totalLockNum = total1;
  } else if (ckitem.lockNum > ckitem.usableNum) {
    console.log(333);
    ckitem.lockNum = 0;
    ckitem.isDisabled = false;
    const total1 = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
      return accumulator + Number(currentObject.lockNum);
    }, 0);
    item.totalLockNum = total1;
  }
  // 联动锁定件数
  // ckitem.lockPartNum = sdNumber * Number(item.partNum);

  ckitem.lockPartNum = ckitem.lockNum * Number(item.partNum);
  const lockPartNumTotal = item.lockWarehouseInfoList.reduce((accumulator, currentObject) => {
    return accumulator + Number(currentObject.lockPartNum);
  }, 0);
  // 判断右侧的锁定件数是否大于需求的件数
  item.lockWarehouseInfoList.map(it => {
    if (lockPartNumTotal < item.detailNum) {
      it.isDisabledjs = false;
      if (it.lockNum == 0) {
        it.isDisabledjs = true;
      }
    }
    // 如果等于时锁定件数全部禁用
    if (lockPartNumTotal == item.detailNum) {
      it.isDisabledjs = true;
    }
  });
  // 联动当前的仓库件数
  const usablePartNums = ckitem.usablePartNum; //仓库的总商品数包括锁定未锁定
  const lockPartNums = ckitem.lockPartNum; //当前锁定的数量件数
  ckitem.lockablePartNum = usablePartNums - lockPartNums;
  // 最终给当前的数锁定总件数
  item.totalLockPartNum = lockPartNumTotal;
  console.log("lockablePartNum", usablePartNums - lockPartNums);

  item.lockWarehouseInfoList.map(it => {
    if (it.lockablePartNum == 0) {
      it.isDisabledjs = true;
    }
  });
};
// 保存
const handelUpdateLock = () => {
  details.value.orderDetailLockList.map(it => {
    it.lockWarehouseInfoList.map(cit => {
      delete cit.max;
      delete cit.maxjs;
      delete cit.isDisabled;
      delete cit.isDisabledjs;
    });
  });
  updateLock(details.value)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功!",
          duration: 2000
        });
        setTimeout(() => {
          router.go(-1);
        }, 1000);
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 声明方法-----------end
// 声明周期页面渲染完后
onMounted(() => {
  getLockLists();
});
</script>
<style scoped lang="scss">
.stock_locking {
  display: flex;
  flex-direction: column;
  height: 100%;
  .header {
    flex: 1;
    max-height: 61px;
    min-height: 61px;
    border-bottom: 1px solid #e2e8f0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    &_left {
      display: flex;
      align-items: center;
      color: #131414;
      font-size: 18px;
      padding-left: 20px;
      span {
        margin-left: 8px;
      }
    }
    &_left::before {
      content: "";
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
    }
    &_right {
      display: flex;
      align-items: center;
      padding-right: 20px;
      overflow: hidden;
      button {
        width: 92px;
        height: 32px;
      }
      button:last-child {
        background-color: #f2f3f5;
      }
    }
  }
  .content {
    display: flex;
    height: 100%;
    &_left {
      flex: 1;
      min-width: 200px;
      max-width: 200px;
      padding: 20px 0 0 20px;
      overflow: hidden;
      border-right: 1px solid #e2e8f0;
      box-sizing: border-box;
      &_header {
        font-size: 16px;
        color: #86909c;
        margin-bottom: 16px;
      }
      &_content {
        ul {
          li {
            margin-bottom: 10px;
            span {
              color: #86909c;
              font-size: 14px;
            }
            p {
              font-size: 14px;
              color: #1a1a1a;
              line-height: 24px;
            }
          }
        }
      }
    }
    &_right {
      flex: 2;
      margin: 20px 16px 20px 20px;
      overflow-y: scroll;
      .list {
        width: 100%;
        min-height: 194px;
        background-color: #f5f7fa;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        .top {
          flex: 2;
          border-bottom: 1px solid #e2e8f0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          &_left {
            flex: 1;
            display: flex;
            align-items: center;
            margin-left: 50px;
            &_img {
              width: 80px;
              height: 80px;
              position: relative;
              .custom-fixed-icon {
                position: absolute;
                top: -8px;
                left: -38px;
              }
              img {
                width: 100%;
                height: 100%;
              }
            }
            &_text {
              margin-left: 20px;
              padding: 18px 0;
              h4 {
                font-size: 16px;
                color: #3d3d3d;
                line-height: 24px;
              }
              p {
                font-size: 12px;
                color: #86909c;
                line-height: 24px;
              }
            }
          }
          &_right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            div {
              display: flex;
              justify-content: flex-end;
              p:last-child {
                margin-left: 44px;
              }
              p {
                font-size: 12px;
                span:first-child {
                  color: #86909c;
                }
                span:last-child {
                  color: #1a1a1a;
                }
              }
            }
          }
        }
        .center {
          flex: 1;
          min-height: 46px;
          max-height: 46px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e1e6ed;
          box-sizing: border-box;
          &_left {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 20px;
            justify-content: space-between;
            max-width: 530px;
            div:nth-child(2) {
              display: flex;
              align-items: center;
              // margin-left: 122px;
            }
            div:nth-child(1) {
              p {
                font-size: 14px;
                color: #3d3d3d;
              }
            }
          }
          &_right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 20px;
            div {
              display: flex;
              align-items: center;
              justify-content: flex-end;
            }
          }
        }
        .center:last-child {
          border: none;
        }
        .botton {
          flex: 1;
          min-height: 46px;
          max-height: 46px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #e2e8f0;
          box-sizing: border-box;
          &_left {
            flex: 2;
            display: flex;
            align-items: center;
            padding-left: 20px;
            div:nth-child(2) {
              display: flex;
              align-items: center;
              margin-left: 122px;
            }
            div:nth-child(1) {
              p {
                font-size: 14px;
                color: #3d3d3d;
              }
            }
          }
          &_right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 20px;
            div {
              display: flex;
              align-items: center;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}
</style>
